<template>
  <div data-v-3264d308="" class="item">
    <div data-v-3264d308="" class="product">
      <img
        data-v-3264d308=""
        :src="item.product_img"
        class="avatar"
      />
      <div data-v-3264d308="" class="name">{{item.product_name}}</div>
      <!---->
    </div>
    <div data-v-3264d308="" class="customer">
      <div data-v-3264d308="" class="info">
        <div data-v-3264d308="" class="label">客户姓名:</div>
        <div data-v-3264d308="" class="data">
          <div data-v-3264d308="" class="text">{{item.user_name}}</div>
        </div>
      </div>
      <div data-v-3264d308="" class="info">
        <div data-v-3264d308="" class="label">手机号码:</div>
        <a data-v-3264d308="" class="data"
          ><div data-v-3264d308="" class="text">{{item.user_phone}}</div>
          <div data-v-3264d308="" class="call"></div
        ></a>
      </div>
      <div v-if="item.status == 5" data-v-3264d308="" class="info">
        <div data-v-3264d308="" class="label">拒绝原因:</div>
        <a data-v-3264d308="" class="data"
          ><div data-v-3264d308="" class="text">{{item.reason}}</div>
          <div data-v-3264d308="" class="call"></div
        ></a>
      </div>
      <!---->
      <div data-v-3264d308="" class="status">{{item.statusName}}</div>
    </div>
    <div data-v-3264d308="" class="status-desc">
      <div data-v-3264d308="" class="icon"></div>
      <span data-v-3264d308="" class="title">状态说明:</span
      ><span data-v-3264d308="" class="desc"
        >此产品因官方限制，无法更新状态，需到结算时间才会自动更新，中途请自行跟踪进度</span
      >
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
const { item } = defineProps({
  item: {
    type: Object,
  },
});
</script>

<style lang="scss" scoped>
.item {
  width: 9.36rem;
  margin: 0 auto 0.32rem;
  background-color: #fff;
  border-radius: 0.13333rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.product {
  width: 8.65333rem;
  min-height: 1.49333rem;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
.product .avatar {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 0.05333rem;
}
.product .name {
  font-size: 0.45333rem;
  color: #333;
  font-weight: 500;
  margin-left: 0.22667rem;
}
.item .customer {
  width: 8.65333rem;
  padding-bottom: 0.52rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}
.item .customer .info {
  width: 8.65333rem;
  margin-top: 0.52rem;
  display: flex;
  justify-content: flex-start;
}
.item .customer .info .data {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.item .customer .info .data .text {
  font-size: 0.37333rem;
  color: #333;
  font-weight: 500;
}
.item .status {
  position: absolute;
  right: 0.26667rem;
  top: 0.46667rem;
  font-size: 0.29333rem;
  color: #fff;
  font-weight: 700;
  width: 1.46667rem;
  height: 0.56rem;
  line-height: 0.56rem;
  padding-right: 0.26667rem;
  text-align: center;
  background: url(https://cdn.jipaikeji.com/statics/weapp/bg/bg-status.png) 50%/100%
    100% no-repeat;
}
.item .customer .info .label {
  font-size: 0.37333rem;
  color: #666;
  font-weight: 500;
  margin-left: 0.08rem;
}
.item .status-desc {
  width: 8.45333rem;
  padding: 0.21333rem 0;
  background: #f1f7ff;
  margin: 0 auto 0.38667rem;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.item .status-desc .title {
  font-size: 0.26667rem;
  color: #1677ff;
  font-weight: 700;
  margin-left: 0.13333rem;
}
.item .status-desc .desc {
  width: 6rem;
  margin-left: 0.2rem;
  font-size: 0.26667rem;
  color: #1677ff;
  font-weight: 400;
}
</style>